//功能页，各种审批及功能查询
import React, {Component} from 'react'
import {View, Text, Image, TouchableOpacity} from 'react-native'
import styles from '../../configs/styles'
import {I18n} from '../../configs/enumeration'
import {connect} from 'react-redux'

class functionsPageIndex extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      header: null
    }
  };

  //初始化props和state
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  apply_list = (business_type, title) => {
    this.props.navigation.navigate('apply_list',
      {business_type: business_type, title: title}
    )
  };


  top_block = (obj)=>{
    return (
      <TouchableOpacity style={styles.topBlocks}
                        onPress={obj.action}>
        <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
          <Image source={obj.icon} style={{width: 50, height: 50}}>
          </Image>
          <Text style={{marginTop: 10, color: 'white'}}>
            {obj.text}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }

  bottom_block = (obj) => {
    return (
      <TouchableOpacity style={styles.functionsBlock} onPress={obj.action}>
        <View>
          <Image source={obj.icon}
                 style={{width: 50, height: 50}}>
          </Image>
          <Text style={{justifyContent: 'center', marginTop: 5}}>
            {obj.text}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <View style={styles.functionsTopBlock}>
          <View style={{alignItems: 'center', padding: 20}}><Text style={{color: 'white', fontSize: 18}}>常用功能</Text></View>
          <View style={{flexDirection: 'row', marginTop: 15, justifyContent: 'space-between', alignItems: 'center'}}>
            {this.top_block({
              text: I18n('audit_list'),
              action: (() => { this.props.navigation.navigate('audit_list', {title: I18n('my', 'audit_list')}) }),
              icon: require('../../assets/icons/icon1.png')})}
            {this.top_block({
              text: I18n('apply_list'),
              action: (() => this.apply_list('', I18n('my', 'apply_list'))),
              icon: require('../../assets/icons/icon1.png')})}
            {this.top_block({
              text: I18n('my_executions'),
              action: (() => this.props.navigation.navigate('execution_list', {title: I18n('my_executions')}) ),
              icon: require('../../assets/icons/icon1.png')})}


          </View>
        </View>

        <View style={{backgroundColor: 'white', flex: 1, padding: 10, paddingTop: 20, flexDirection: 'row', flexWrap: 'wrap'}}>
          {this.bottom_block({
            text: I18n('take_away_history_menu'),
            action: (() => { this.apply_list(2, I18n('my', 'take_away_history_menu')) }),
            icon: require('../../assets/icons/icon1.png')})}
          {this.bottom_block({
            text: I18n('borrow_history_menu'),
            action: (() => { this.apply_list(3, I18n('my', 'borrow_history_menu')) }),
            icon: require('../../assets/icons/icon1.png')})}
          {this.bottom_block({
            text: '单号查询',
            action: (() => { this.props.navigation.navigate('searchApply') }),
            icon: require('../../assets/icons/icon1.png')})}
          {this.bottom_block({
            text: '派车查询',
            action: (() => { this.props.navigation.navigate('searchCarAppoint') }),
            icon: require('../../assets/icons/icon1.png')})}
        </View>

      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
};

export default connect(mapStateToProps)(functionsPageIndex)
